<!DOCTYPE html>
<meta charset="UTF-8">
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="bootstrap-fileinput/css/fileinput.min.css">
	<script type="text/javascript" src="bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="bootstrap-fileinput/js/locales/zh.js"></script>
	<script type="text/javascript" src="bootstrap-fileinput/js/locales/zh-TW.js"></script>
	<link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
	<script type="text/javascript" src="bootstrap-table/dist/bootstrap-table.js"></script>
	<script type="text/javascript" src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript" src="bootstrap-table/bootbox.js"></script>
	<div id="toolbar" class="btn-group">
	<button data-bind="click:addClick" onclick="btn_add()" type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	</button>
	<button data-bind="click:editClick"onclick="btn_edit()"type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	</button>
	<button id="btn_delete"  data-bind="click:deleteClick" type="button" onclick="btn_delete()"
		class="btn btn-default">
		<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	</button>
	</div>
	
	<table id="persion_table" class="table table-hover"></table>
	
<script>
$(function(){
	$("#persion_table").bootstrapTable({
		url: "persion/list",//请求地址
        dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
        dataType: "json",//期待返回数据类型
        method: "post",//请求方式
        toolbar: "#toolbar",//指定工具栏,工具按钮用哪个容器
        sidePagination: "server",//服务端分页
        queryParams: function (param) {
	     return  {limit: param.limit, offset: param.offset,
	    	 search:param.search,sort:param.sort,order:param.order
	            }; },
        search: true,//是否启用搜索框
        queryParamsType: "limit",//查询参数组织方式
        searchAlign: "right",//搜索框对齐方式
        pagination: true,//是否分页
        pageSize: 10,//单页记录数
        pageList: [10, 20, 30],//分页步进值
        showRefresh: true,//刷新按钮
        showColumns: true,//列选择按钮
        showToggle:true,  //切换格式按钮
        clickToSelect:true,//是否启用点击选中行
        singleSelect:true, //选中行
        selectIds:[],		//选中的行的id号
        toolbarAlign: "left",//工具栏对齐方式
        buttonsAlign: "right",//按钮对齐方式
        locale: "zh-CN", //中文支持
        columns: [
            {title: "全选",field: "select",checkbox: true,width: 20,align: "center",valign: "middle"},
            {title: "ID", field: "id",sortable: true,order: "desc"},//是否可排序
            {title: "账户",field: "username"},
            {title: "密码",field: "password"},
            {title: "性别",field: "sex"},
            {title: "年龄",field: "age"},
            {title: "民族",field: "nation"},
            {title: "住址",field: "address"},
            {title: "电话",field: "phone"},
            {title: "身份",field: "identity"}
        ]      
	});
});
function btn_add(){
	var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
	dialog.load("persion/edit");
	$("body").append(dialog);
	dialog.modal().on('hidden.bs.modal', function () {//弹出模态框,绑定关闭后的事件
  	dialog.remove();//删除
  });
  }
function btn_edit(){
	  var a= $('#persion_table').bootstrapTable('getSelections');
	  if(a.length!=1){
		  bootbox.alert("请选中一行进行编辑");
	  }else{ 
			var id = a[0].id;
			var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
			dialog.load("persion/edit?id="+id);
			$("body").append(dialog);
			dialog.modal().on('hidden.bs.modal',function(){
	      	dialog.remove();
		});
	 }
}
function btn_delete(){
	var a= $('#persion_table').bootstrapTable('getSelections');
	var id = a[0].id;
	$.post("persion/delete",{id:id},function(data){
		bootbox.alert(data);
		 $('#persion_table') .bootstrapTable('refresh');
	})
}
</script>